<template>
  <div class="logMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--安全日志-->
    <div class="pageBody" id="pageBody">
      <!-- 左侧部分 -->
      <componentsPageMenu :lang="lang"></componentsPageMenu>
      <!-- 右侧部分 -->
      <div class="pageMain">

        <section class="list">
          <ul>
            <li>{{lang.time}}</li>
            <li>{{lang.classification}}</li>
            <li>{{lang['iP address']}}</li>
            <li style="text-align:right">{{lang.remarks}}</li>
          </ul>
          <ul  v-for="item in SafetylogList.Data">
            <li>{{item.CreateDate}}</li>
            <li>
              <p v-if="item.ClientType  ===0">{{lang['web site login']}}</p>
              <p v-if="item.ClientType  ===1">{{lang['android terminal logon']}}</p>
              <p v-if="item.ClientType  ===2">iOS</p>
            </li>
            <li>{{item.LoginIP}}</li>
            <li style="text-align:right"> {{lang[item.BusinessName]}}</li>
          </ul>
        </section>

        <!-- 翻页代码 -->
        <SwPaging
        :total="total"
        :pageSize="pageSize"
        :pageRange="pageRange"
        :lang="lang"
        @jumpPage="jumpPage"></SwPaging>
      </div>
    </div>
    <!--安全日志-->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import SwPaging from '@/components/SwPaging/index.vue'
import componentsPageMenu from './components/pageMenu.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      SafetylogList: '',
      pageIndex: 1, // 当前页
      pageSize: 50, // 每页多少条
      pageRange: 7, // 页码条范围，例如8就是显示1-7的页码条
      total: 0
    }
  },
  components: {
    SwPaging,
    componentsPageMenu
  },
  methods: {
    GetLogList (no) {
      this.$http.post('Security/GetLogList', {
        pageIndex: no - 1 || this.pageIndex - 1,
        pageSize: this.pageSize
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.SafetylogList = res
          this.total = res.TotalItem  // 总页数
        }
      })
    },
    jumpPage (no) {
      this.GetLogList(no)
    }
  },
  mounted () {
    this.GetLogList()
  }
}
</script>

<style lang="less">

.logMain {
  background: #14141c;

  .list ul {
    padding: 0 20px;
    overflow: hidden;
    background: #181A23;

    &:nth-of-type(1) {
      padding: 0 20px;
      overflow: hidden;
      background: #202832;
    }
    &:last-child li {
      border-bottom: none;
    }
    li {
      float: left;
      line-height: 50px;
      height: 50px;
      font-size: 14px;
      border-bottom: solid 1px #23252F;
      color: rgba(255,255,255,.8);

      &:first-child {
        width:30%;
      }

      &:nth-of-type(2) {
        width: 30%;
      }

      &:nth-of-type(3) {
        width: 20%;
      }

      &:last-child {
        width: 20%;
      }

      p {
        height: 40px;
        line-height: 40px;
        padding: 5px 0;
      }
    }
  }
}

@media screen and (max-width:800px){
  .logMain .list ul li {font-size: 12px;}
}
</style>

